<template>
  <header class="header-wrap">
    <section class="header-inner">
      <div style="width:0%"></div>
      <div class="logo">
        <div class="logo-box" @click="toLink('/')">
          <span
            style="font-family: fantasy; font-weight: 500; color: #edc940;font-size:25px"
            >FITBLOG</span
          >
        </div>
      </div>
      <div class="nav">
        <ul class="nav-box">
          <li
            v-for="(item, index) in nav"
            @click="toLink(item.router, index)"
            :class="
              index === navIndex ? 'nav-item nav-item-active' : 'nav-item'
            "
            :key="item.id"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div class="search">
        <Input
          size="default"
          @keyup.enter.native="search"
          suffix="ios-search"
          v-model="keyword"
          placeholder="搜索文章.."
          style="width: auto"
        />
      </div>
    </section>
      <div style="position: absolute;
    right: 20px;">
        <Button style="margin-right:20px" @click="$router.push('/create')">发表文章</Button>
        <Dropdown trigger="click" @on-click="getName">
            <a href="javascript:void(0)">
                {{name}}
                <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
                <DropdownItem name="persen">个人主页</DropdownItem>
                <DropdownItem name="logout">退出登录</DropdownItem>
            </DropdownMenu>
        </Dropdown>
      </div>
  </header>
</template>

<script>
import { mapState } from "vuex";
  import    { EventBus }  from '../bus'

export default {
  name: "",
  computed: {
    // ...mapState({
    //   navIndex: 
    // }),
  },
  data() {
    return {
      keyword: "",
      nav: [
        {
          name: "文章",
          router: "/article-list",
        },
        {
          name: "收藏夹",
          router: "/favourite",
        },
        {
          name: "我的发布",
          router: "/mine",
        },
        {
          name: "关于博客",
          router: "/about",
        },
      ],
      name: localStorage.nickname,
      navIndex: 0
    };
  },
  methods: {
    // 路由跳转
    toLink(router, idx) {
      // if (!isActiveIndex) {
        this.navIndex = idx
        this.$router.push(router);
      // }
    },
    // 搜索
    search() {
      const keyword = "/articles?keyword=" + this.keyword;
      if (this.$route.name !== "article-list") {
        this.$router.push(keyword);
      } else {
        window.location.replace(keyword);
      }
    },
    getName(v) { 
      if(v === 'logout') { 
        localStorage.clear()
        this.$router.replace('/login')
      }else{ 
        this.$router.push({
          path: '/user',
          query : { 
            id: localStorage.userid
          }
        })
        location.reload()
      }
    }
  },
  mounted() { 
    EventBus.$on('getName', res => { 
      this.name = res
    })
  }
};
</script>

<style scoped lang="less">
.header-wrap {
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.header-inner {
  margin: 0 auto;
  width: @window-Width;
  display: flex;
  align-items: center;
}

.logo {
}

.logo-box {
  width: 168px;
  display: flex;
  align-items: center;

  & img {
    width: 100%;
  }
}

.nav {
  flex: 1;
}

.nav-box {
  display: flex;
  align-items: stretch;
  padding: 0 32px;
}

.nav-item {
  cursor: pointer;
  color: #17233d;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding: 0 32px;
  white-space: nowrap;

  &:hover {
    color: #f5b4ca;
  }
}

.nav-item-active {
  color: #f5b4ca;
}

@media screen and (min-width: 200px) and (max-width: 750px) {
  .search {
    display: none;
  }

  .header-inner {
    box-sizing: border-box;
    width: 100%;
    padding: 0 32px;
  }
}
</style>
